<template>
  <div>
    <el-dialog v-model="flag" :title="messageTypeObj[data.type]" width="500px">
      <div class="content">
        {{ data.content }}
      </div>
      <div class="time">
        {{ moment(data.createdAt).format('YYYY-MM-DD hh:mm:ss') }}
      </div>
      <div class="footer">
        <el-button type="primary" v-if="!canConfirm" @click="confrim">确认</el-button>
        <el-button @click="flag = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import moment from "moment";
import { ref,computed } from "vue";
import userStore from '../stores/module/user'
import { readMessage } from "../api/message/index.ts";
import WebSocketService from "../utils/websocket.ts";
const store = userStore()
let props = defineProps({
  data: Object
});
const messageTypeObj = ref({
  "0":"好友请求",
  "1":"好友请求"
})
let flag = ref(false);
const confrim = async () => {
  switch (props.data.type){
    case "0":
      WebSocketService.send({sendUser:JSON.parse(localStorage.getItem('user')),receptionUser:props.data.sendUser,type:'1'})
      await readMessage({id:props.data._id,status:'2'})
      store.getInfo()
      flag.value = false
      break;
    case "1":
      console.log("表格共享");
      break;
  }
}
const canConfirm = computed(() => {
      return (props.data.type == 0 && props.data.status==2) || props.data.type == 1
});
defineExpose({flag})
</script>

<style lang="scss" scoped>
.content{
  margin-bottom: 10px;
  font-size: 16px;
}
.time{
  font-size: 12px;
  text-align: right;
  color: #666;
  margin-bottom: 10px;
}
.footer{
  display: flex;
  justify-content: center;
}
</style>
